<template>
  <view class="survival-page">
    <!-- 资源显示 -->
    <view class="resources-section">
      <view class="section-title">当前资源</view>
      <view class="resources-grid">
        <view class="resource-item">
          <text class="resource-icon">🌲</text>
          <text class="resource-name">木材</text>
          <text class="resource-count">{{ gameState?.resources?.wood || 0 }}</text>
        </view>
        <view class="resource-item">
          <text class="resource-icon">🪨</text>
          <text class="resource-name">石头</text>
          <text class="resource-count">{{ gameState?.resources?.stone || 0 }}</text>
        </view>
        <view class="resource-item">
          <text class="resource-icon">🍎</text>
          <text class="resource-name">食物</text>
          <text class="resource-count">{{ gameState?.resources?.food || 0 }}</text>
        </view>
        <view class="resource-item">
          <text class="resource-icon">💧</text>
          <text class="resource-name">水</text>
          <text class="resource-count">{{ gameState?.resources?.water || 0 }}</text>
        </view>
      </view>
    </view>
    
    <!-- 当前区域信息 -->
    <view class="current-area-info">
      <view class="area-header">
        <text class="area-title">📍 {{ currentArea?.name || '未知区域' }}</text>
        <text class="area-status">{{ getAreaStatus(currentArea) }}</text>
      </view>
      <text class="area-description">{{ currentArea?.description || '未知区域' }}</text>
    </view>
    
    
    <!-- 存档管理弹窗 -->
    <view v-if="showSaveManager" class="save-manager-modal">
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">存档管理</text>
          <button class="close-btn" @click="closeSaveManager">×</button>
        </view>
        
        <view class="save-slots">
          <view class="slot-section">
            <text class="section-title">手动存档槽位</text>
            <view class="slot-grid">
              <view 
                class="slot-item" 
                v-for="(slot, index) in saveSlots" 
                :key="index"
                @click="loadFromSlot(index)"
              >
                <view class="slot-info">
                  <text class="slot-name">存档 {{ index + 1 }}</text>
                  <text class="slot-time">{{ slot.time || '空' }}</text>
                </view>
                <button class="save-to-slot-btn" @click.stop="saveToSlot(index)">
                  {{ slot.time ? '覆盖' : '保存' }}
                </button>
              </view>
            </view>
          </view>
          
          <view class="slot-section">
            <text class="section-title">自动存档</text>
            <view class="slot-item">
              <view class="slot-info">
                <text class="slot-name">自动存档</text>
                <text class="slot-time">{{ autoSave.time || '无' }}</text>
              </view>
              <button class="load-auto-save-btn" @click="loadAutoSave">
                加载
              </button>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 地图探索弹窗 -->
    <view v-if="showMapModal" class="map-modal">
      <view class="modal-overlay" @click="closeMapModal"></view>
      <view class="map-modal-content">
        <view class="map-modal-header">
          <text class="modal-title">🗺️ 荒岛地图</text>
          <view class="exploration-info">
            <text class="exploration-points">探索点数: {{ explorationPoints }}</text>
            <text class="current-location">当前位置: {{ currentArea?.name || '未知' }}</text>
          </view>
          <button class="close-btn" @click="closeMapModal">×</button>
        </view>
        
        <view class="map-container" 
              @touchstart="onMapTouchStart" 
              @touchmove="onMapTouchMove" 
              @touchend="onMapTouchEnd"
              @mousedown="onMapMouseDown"
              @mousemove="onMapMouseMove"
              @mouseup="onMapMouseUp"
              @mouseleave="onMapMouseUp">
          <view class="map-grid-large" :style="{ transform: `translate(${mapOffset.x}px, ${mapOffset.y}px)` }">
            <view 
              class="map-tile-large" 
              v-for="(tile, index) in mapTiles" 
              :key="index"
              :class="{
                'current': tile.id === currentLocationId,
                'explored': tile.explored,
                'discovered': tile.discovered,
                'locked': !tile.discovered,
                'exploring': exploringTile === tile.id
              }"
              :style="{ 
                left: tile.position.x + 'px', 
                top: tile.position.y + 'px' 
              }"
              @click="exploreTile(tile)"
            >
              <text class="tile-icon-large">{{ tile.icon }}</text>
              <text class="tile-name-large">{{ tile.name }}</text>
              <text class="tile-status-large" v-if="tile.explored">已探索</text>
              <view v-if="exploringTile === tile.id" class="exploration-timer">
                <text class="timer-text">{{ explorationTimer }}s</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 地图控制按钮 -->
        <view class="map-controls">
          <button class="control-btn" @click="resetMap">⌂</button>
        </view>
        
        <view class="map-legend">
          <view class="legend-item">
            <view class="legend-color current"></view>
            <text>当前位置</text>
          </view>
          <view class="legend-item">
            <view class="legend-color explored"></view>
            <text>已探索</text>
          </view>
          <view class="legend-item">
            <view class="legend-color discovered"></view>
            <text>已发现</text>
          </view>
          <view class="legend-item">
            <view class="legend-color locked"></view>
            <text>未发现</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 地点切换动画 -->
    <view v-if="showSwitchAnimation" class="location-switch-animation">
      <view class="switch-content">
        <view class="switch-icon">{{ switchAnimationData?.icon }}</view>
        <view class="switch-text">前往 {{ switchAnimationData?.name }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SurvivalPage',
  props: {
    gameState: {
      type: Object,
      required: true
    },
    gameLog: {
      type: Array,
      default: () => []
    },
    showSaveManager: {
      type: Boolean,
      default: false
    },
    saveSlots: {
      type: Array,
      default: () => []
    },
    autoSave: {
      type: Object,
      default: () => ({ time: null, data: null })
    },
    availableActions: {
      type: Array,
      default: () => []
    },
    explorationPoints: {
      type: Number,
      default: 0
    },
    mapTiles: {
      type: Array,
      default: () => []
    },
    currentLocationId: {
      type: String,
      default: 'beach'
    }
  },
  
  data() {
    return {
      showMapModal: false,
      mapOffset: { x: 0, y: 0 },
      touchStart: { x: 0, y: 0 },
      isDragging: false,
      exploringTile: null,
      explorationTimer: 0,
      explorationTimerInterval: null,
      mapScale: 1,
      lastTouchDistance: 0,
      isZooming: false,
      minScale: 0.5,
      maxScale: 3,
      showSwitchAnimation: false,
      switchAnimationData: null
    }
  },
  
  computed: {
    healthPercent() {
      return this.gameState?.health || 0
    },
    hungerPercent() {
      return this.gameState?.hunger || 0
    },
    thirstPercent() {
      return this.gameState?.thirst || 0
    },
    energyPercent() {
      return this.gameState?.energy || 0
    },
    locationDescription() {
      const descriptions = {
        '海滩': '一片开阔的海滩，可以看到远处的大海。这里有一些漂来的木材和贝壳。',
        '森林': '茂密的森林，树木参天。这里有丰富的木材和可能的食物。',
        '山洞': '一个阴暗的山洞，里面有石头和可能的庇护所。'
      }
      return descriptions[this.gameState?.currentLocation] || '未知区域'
    },
    
    currentArea() {
      return this.mapTiles.find(tile => tile.id === this.currentLocationId) || null
    }
  },
  
  methods: {
    performAction(action) {
      this.$emit('perform-action', action)
    },
    
    canPerformAction(action) {
      if (!this.gameState) return false
      
      switch (action.id) {
        case 'gather_wood':
          return this.gameState.energy >= 10
        case 'gather_stone':
          return this.gameState.energy >= 15
        case 'find_food':
          return this.gameState.energy >= 20
        case 'find_water':
          return this.gameState.energy >= 15
        case 'rest':
          return true
        default:
          return true
      }
    },
    
    closeSaveManager() {
      this.$emit('close-save-manager')
    },
    
    saveToSlot(index) {
      this.$emit('save-to-slot', index)
    },
    
    loadFromSlot(index) {
      this.$emit('load-from-slot', index)
    },
    
    loadAutoSave() {
      this.$emit('load-auto-save')
    },
    
    exploreTile(tile) {
      this.$emit('explore-tile', tile)
    },
    
    getAreaStatus(area) {
      if (!area) return '未知'
      if (area.explored) return '已探索'
      if (area.discovered) return '已发现'
      return '未发现'
    },
    
    openMapModal() {
      this.showMapModal = true
      this.mapOffset = { x: 0, y: 0 }
      this.isDragging = false
      this.isZooming = false
    },
    
    closeMapModal() {
      this.showMapModal = false
      this.isDragging = false
    },
    
    onMapTouchStart(e) {
      if (e.touches.length === 1) {
        // 单指触摸 - 准备拖动
        this.touchStart = {
          x: e.touches[0].clientX,
          y: e.touches[0].clientY
        }
        this.isDragging = false
        this.isZooming = false
      } else if (e.touches.length === 2) {
        // 双指触摸 - 准备缩放
        this.isZooming = true
        this.isDragging = false
        this.lastTouchDistance = this.getTouchDistance(e.touches[0], e.touches[1])
      }
    },
    
    onMapTouchMove(e) {
      if (e.touches.length === 1 && this.touchStart) {
        // 单指拖动
        const deltaX = e.touches[0].clientX - this.touchStart.x
        const deltaY = e.touches[0].clientY - this.touchStart.y
        
        // 如果移动距离超过阈值，开始拖动
        if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) {
          this.isDragging = true
          this.mapOffset.x += deltaX * 0.5 // 降低拖动灵敏度
          this.mapOffset.y += deltaY * 0.5
          
          // 限制拖动范围 - 允许查看更多地图内容
          const maxOffsetX = 600
          const maxOffsetY = 400
          this.mapOffset.x = Math.max(-maxOffsetX, Math.min(maxOffsetX, this.mapOffset.x))
          this.mapOffset.y = Math.max(-maxOffsetY, Math.min(maxOffsetY, this.mapOffset.y))
          
          this.touchStart = {
            x: e.touches[0].clientX,
            y: e.touches[0].clientY
          }
        }
      } else if (e.touches.length === 2 && this.isZooming) {
        // 双指缩放
        const currentDistance = this.getTouchDistance(e.touches[0], e.touches[1])
        const scaleChange = currentDistance / this.lastTouchDistance
        
        this.mapScale *= scaleChange
        this.mapScale = Math.max(this.minScale, Math.min(this.maxScale, this.mapScale))
        
        this.lastTouchDistance = currentDistance
      }
    },
    
    onMapTouchEnd() {
      this.touchStart = null
      this.isZooming = false
    },
    
    onMapMouseDown(e) {
      // PC端鼠标按下
      e.preventDefault()
      this.touchStart = {
        x: e.clientX,
        y: e.clientY
      }
      this.isDragging = false
      this.isZooming = false
    },
    
    onMapMouseMove(e) {
      // PC端鼠标移动
      if (this.touchStart) {
        const deltaX = e.clientX - this.touchStart.x
        const deltaY = e.clientY - this.touchStart.y
        
        // 如果移动距离超过阈值，开始拖动
        if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
          this.isDragging = true
          this.mapOffset.x += deltaX
          this.mapOffset.y += deltaY
          
          // 限制拖动范围 - 允许查看更多地图内容
          const maxOffsetX = 600
          const maxOffsetY = 400
          this.mapOffset.x = Math.max(-maxOffsetX, Math.min(maxOffsetX, this.mapOffset.x))
          this.mapOffset.y = Math.max(-maxOffsetY, Math.min(maxOffsetY, this.mapOffset.y))
          
          this.touchStart = {
            x: e.clientX,
            y: e.clientY
          }
        }
      }
    },
    
    onMapMouseUp() {
      // PC端鼠标释放
      this.touchStart = null
      this.isZooming = false
    },
    
    getTouchDistance(touch1, touch2) {
      const dx = touch1.clientX - touch2.clientX
      const dy = touch1.clientY - touch2.clientY
      return Math.sqrt(dx * dx + dy * dy)
    },
    
    resetMap() {
      this.mapOffset = { x: 0, y: 0 }
      this.isDragging = false
      this.isZooming = false
    },
    
    exploreTile(tile) {
      // 如果正在拖动，不触发点击事件
      if (this.isDragging) {
        this.isDragging = false
        return
      }
      
      // 如果已经在当前位置
      if (tile.id === this.currentLocationId) {
        uni.showToast({
          title: '你已经在当前位置',
          icon: 'none',
          duration: 2000
        })
        return
      }
      
      // 如果已经探索过，直接前往
      if (tile.explored) {
        this.switchToLocation(tile)
        return
      }
      
      // 如果正在探索其他区域，不允许新的探索
      if (this.exploringTile && this.exploringTile !== tile.id) {
        uni.showToast({
          title: '正在探索其他区域，请等待',
          icon: 'none',
          duration: 2000
        })
        return
      }
      
      // 开始探索倒计时
      this.startExploration(tile)
    },
    
    startExploration(tile) {
      this.exploringTile = tile.id
      this.explorationTimer = 3
      
      // 开始倒计时
      this.explorationTimerInterval = setInterval(() => {
        this.explorationTimer--
        if (this.explorationTimer <= 0) {
          this.completeExploration(tile)
        }
      }, 1000)
    },
    
    completeExploration(tile) {
      // 清除倒计时
      if (this.explorationTimerInterval) {
        clearInterval(this.explorationTimerInterval)
        this.explorationTimerInterval = null
      }
      
      this.exploringTile = null
      this.explorationTimer = 0
      
      // 标记为已探索
      tile.explored = true
      
      // 触发探索事件
      this.$emit('explore-tile', tile)
    },
    
    switchToLocation(tile) {
      // 显示切换动画
      this.switchAnimationData = tile
      this.showSwitchAnimation = true
      
      // 延迟执行切换，让动画先播放
      setTimeout(() => {
        // 触发切换地点事件
        this.$emit('switch-location', tile)
        
        // 关闭地图
        this.closeMapModal()
        
        // 显示成功提示
        uni.showToast({
          title: `已前往 ${tile.name}`,
          icon: 'success',
          duration: 2000
        })
        
        // 隐藏动画
        this.showSwitchAnimation = false
        this.switchAnimationData = null
      }, 800) // 动画持续时间
    }
  }
}
</script>

<style scoped>
.survival-page {
  padding: 20rpx;
}

.game-header {
  margin-bottom: 30rpx;
  padding: 20rpx;
  background: white;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.header-top {
  margin-bottom: 20rpx;
}

.header-title {
  text-align: center;
}

.game-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.game-subtitle {
  font-size: 24rpx;
  color: #666;
  display: block;
}

.status-bars {
  margin-bottom: 20rpx;
}

.status-item {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.status-label {
  font-size: 24rpx;
  color: #333;
  width: 120rpx;
}

.status-bar {
  flex: 1;
  height: 20rpx;
  background: #f0f0f0;
  border-radius: 10rpx;
  margin: 0 12rpx;
  overflow: hidden;
}

.status-fill {
  height: 100%;
  border-radius: 10rpx;
  transition: width 0.3s ease;
}

.status-fill.health {
  background: linear-gradient(90deg, #e74c3c, #c0392b);
}

.status-fill.hunger {
  background: linear-gradient(90deg, #f39c12, #e67e22);
}

.status-fill.thirst {
  background: linear-gradient(90deg, #3498db, #2980b9);
}

.status-fill.energy {
  background: linear-gradient(90deg, #2ecc71, #27ae60);
}

.status-value {
  font-size: 20rpx;
  color: #666;
  width: 60rpx;
  text-align: right;
}

.resources {
  display: flex;
  justify-content: space-between;
}

.resource-item {
  text-align: center;
  flex: 1;
}

.resource-icon {
  font-size: 32rpx;
  display: block;
  margin-bottom: 8rpx;
}

.resource-count {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
}

/* 地图探索按钮 */
.map-exploration-btn {
  margin-bottom: 20rpx;
}

.explore-btn {
  width: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 16rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.explore-btn:active {
  transform: scale(0.98);
}

.explore-icon {
  font-size: 32rpx;
}

.explore-text {
  font-size: 28rpx;
  font-weight: bold;
}

.explore-points {
  font-size: 24rpx;
  background: rgba(255, 255, 255, 0.2);
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
}

/* 地图弹窗 */
.map-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.map-modal-content {
  position: relative;
  background: white;
  border-radius: 20rpx;
  margin: 40rpx;
  width: calc(100% - 80rpx);
  height: calc(100% - 80rpx);
  max-width: 600rpx;
  max-height: 800rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.map-modal-header {
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.exploration-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.exploration-points, .current-location {
  font-size: 22rpx;
  color: #667eea;
  font-weight: bold;
}

.close-btn {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  font-size: 36rpx;
  color: #999;
  background: none;
  border: none;
  padding: 10rpx;
  line-height: 1;
}

.map-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #e8f5e8 0%, #f0f8ff 100%);
  cursor: grab;
}

.map-container:active {
  cursor: grabbing;
}

.map-grid-large {
  position: absolute;
  width: 1200rpx;
  height: 800rpx;
  min-width: 1200rpx;
  min-height: 800rpx;
  top: 0;
  left: 0;
  transition: transform 0.1s ease-out;
}

.map-tile-large {
  position: absolute;
  width: 120rpx;
  height: 120rpx;
  background: white;
  border: 3rpx solid #e0e0e0;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.map-tile-large.current {
  border-color: #667eea;
  background: #f0f8ff;
  transform: scale(1.1);
  box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.3);
}

.map-tile-large.explored {
  border-color: #27ae60;
  background: #f0fff4;
}

.map-tile-large.discovered {
  border-color: #f39c12;
  background: #fffbf0;
}

.map-tile-large.locked {
  opacity: 0.5;
  background: #f5f5f5;
}

.map-tile-large.exploring {
  border-color: #e74c3c;
  background: #fff5f5;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.tile-icon-large {
  font-size: 40rpx;
  display: block;
  margin-bottom: 8rpx;
}

.tile-name-large {
  font-size: 20rpx;
  color: #333;
  font-weight: bold;
  display: block;
  margin-bottom: 4rpx;
}

.tile-status-large {
  font-size: 16rpx;
  color: #666;
}

.exploration-timer {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background: #e74c3c;
  color: white;
  border-radius: 50%;
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18rpx;
  font-weight: bold;
}

.map-legend {
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
  background: #f8f9fa;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 16rpx;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 20rpx;
  color: #666;
}

.legend-color {
  width: 20rpx;
  height: 20rpx;
  border-radius: 4rpx;
  border: 1rpx solid #ccc;
}

.legend-color.current {
  background: #667eea;
}

.legend-color.explored {
  background: #27ae60;
}

.legend-color.discovered {
  background: #f39c12;
}

.legend-color.locked {
  background: #95a5a6;
}

/* 地图控制按钮 */
.map-controls {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.control-btn {
  width: 60rpx;
  height: 60rpx;
  background: rgba(255, 255, 255, 0.9);
  border: 1rpx solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: bold;
  color: #333;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.control-btn:active {
  background: rgba(102, 126, 234, 0.1);
  transform: scale(0.95);
}

/* 地点切换动画 */
.location-switch-animation {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
  pointer-events: none;
}

.switch-content {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 30rpx 40rpx;
  border-radius: 20rpx;
  text-align: center;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10rpx);
  opacity: 1;
  transform: scale(1) translateY(0);
  animation: switchIn 0.3s ease-out;
}

.switch-icon {
  font-size: 60rpx;
  margin-bottom: 16rpx;
  animation: bounce 0.6s ease-out 0.2s both;
}

.switch-text {
  font-size: 28rpx;
  font-weight: bold;
  animation: fadeInUp 0.4s ease-out 0.4s both;
}

@keyframes switchIn {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(50rpx);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes bounce {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.map-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.exploration-points {
  font-size: 24rpx;
  color: #667eea;
  font-weight: bold;
}

.map-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12rpx;
}

.map-tile {
  background: #f8f9fa;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 16rpx;
  text-align: center;
  transition: all 0.3s ease;
  min-height: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.map-tile.current {
  border-color: #667eea;
  background: #f0f8ff;
  transform: scale(1.05);
}

.map-tile.explored {
  border-color: #27ae60;
  background: #f0fff4;
}

.map-tile.discovered {
  border-color: #f39c12;
  background: #fffbf0;
}

.map-tile.locked {
  opacity: 0.5;
  background: #f5f5f5;
}

.tile-icon {
  font-size: 32rpx;
  display: block;
  margin-bottom: 8rpx;
}

.tile-name {
  font-size: 20rpx;
  color: #333;
  font-weight: bold;
  display: block;
  margin-bottom: 4rpx;
}

.tile-status {
  font-size: 16rpx;
  color: #666;
}

/* 当前区域信息 */
.current-area-info {
  background: white;
  padding: 20rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.area-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.area-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.area-status {
  font-size: 20rpx;
  color: #667eea;
  font-weight: bold;
}

.area-description {
  font-size: 22rpx;
  color: #666;
  line-height: 1.5;
}

.game-area {
  background: white;
  padding: 20rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.current-location {
  margin-bottom: 20rpx;
}

.location-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.location-description {
  font-size: 22rpx;
  color: #666;
  line-height: 1.5;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
}

.action-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12rpx;
  padding: 20rpx;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
}

.action-btn:disabled {
  background: #bdc3c7;
  color: #7f8c8d;
  box-shadow: none;
}

.action-btn:active:not(:disabled) {
  transform: scale(0.95);
  box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.4);
}

.action-icon {
  font-size: 32rpx;
  display: block;
  margin-bottom: 8rpx;
}

.action-name {
  font-size: 24rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 4rpx;
}

.action-cost {
  font-size: 20rpx;
  color: #666;
}

/* 存档管理弹窗样式 */
.save-manager-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 20rpx;
  margin: 40rpx;
  max-width: 600rpx;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  background: #f8f9fa;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.close-btn {
  font-size: 36rpx;
  color: #999;
  background: none;
  border: none;
  padding: 10rpx;
  line-height: 1;
}

.save-slots {
  padding: 30rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.slot-section {
  margin-bottom: 30rpx;
}

.slot-section:last-child {
  margin-bottom: 0;
}

.section-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 16rpx;
}

.slot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16rpx;
}

.slot-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  border: 1rpx solid #e0e0e0;
}

.slot-info {
  flex: 1;
}

.slot-name {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.slot-time {
  font-size: 20rpx;
  color: #666;
  display: block;
}

.save-to-slot-btn, .load-auto-save-btn {
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8rpx;
  padding: 12rpx 20rpx;
  font-size: 22rpx;
  font-weight: bold;
}

.save-to-slot-btn:active, .load-auto-save-btn:active {
  transform: scale(0.95);
  opacity: 0.8;
}

/* 新增样式 */
.resources-section {
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #d1d5db;
  margin-bottom: 16rpx;
}

.resources-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;
}

.resource-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 16rpx;
  background: rgba(55, 65, 81, 0.5);
  border-radius: 12rpx;
  border: 1rpx solid rgba(75, 85, 99, 0.3);
}

.resource-icon {
  font-size: 28rpx;
}

.resource-name {
  font-size: 24rpx;
  color: #9ca3af;
  flex: 1;
}

.resource-count {
  font-size: 24rpx;
  color: white;
  font-weight: bold;
}

.actions-section {
  margin-bottom: 24rpx;
}
</style>
